<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
//接收父组件传来的参数
const props = defineProps(['hospitalInfo']);

const gotoDetail = () => {
  router.push({ path: '/hospital/register',query: { hoscode: props.hospitalInfo.hoscode }})
}

</script>

<template>
  <el-card class="box-card" shadow="hover" @click="gotoDetail">
    <div class="content">
      <div class="left">
        <h3>{{  hospitalInfo.hosname }}</h3>
        <div class="tips">
          <div class="level">
            <img src="@/assets/01.png" alt="icon" />
            <p>等级：{{ hospitalInfo.param.hostypeString }}</p>
          </div>
          <div class="time">
            <img src="@/assets/02.png" alt="icon" />
            <p>每日放号时间：{{ hospitalInfo.bookingRule.releaseTime}}</p>
          </div>

        </div>
      </div>
      <div class="right">
        <img v-if="hospitalInfo.logoData" :src="`data:image/jpeg;base64,${hospitalInfo.logoData}`" alt="logo">
        <img v-else src="@/assets/images/logo.png" alt="default logo"> <!-- 提供一个默认图片 -->
      </div>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
.box-card:hover {
  cursor: pointer;
  box-shadow: 0 0 10px #999;
  transform: scale(1.02);
   & h3 {
      color: #333;
   }

}
.content {
  display: flex;
  justify-content: space-between;

  .left {
    width: 90%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #a4a3a3;
    h3 {
      font-size: 20px;
      font-weight: bold;
    }
    .tips {
      display: flex;
      margin: 15px 0px 0px 0px;
      .level, .time {
        display: flex;
        align-items: center;
        margin-right: 10px;
        img {
          width: 24px;
          height: 24px;
          margin-right: 10px;
        }
        p {
          font-size: 14px;
          font-weight: bold;
        }
      }
    }
  }
  .right {
    img {
      width: 70px;
      height: 70px;
      border-radius: 50%;
    }
  }
}

</style>